<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${type}+'-'+ ${title}"></title>
    <meta charset="utf-8" />
    <meta name="keywords" th:content="${keywords}" />
    <meta name="description" th:content="${desc}" />
    <link rel="icon" type="image/ico" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="/css/mdui.min.css"/>
    <link rel="stylesheet" href="/css/style.css"/>
    <link rel="stylesheet" href="/css/mdclub.css"/>
    <link rel="stylesheet" href="/css/highlight.min.css">
    <script src="/js/highlight.min.js"></script>
</head>
<div th:include="common/header::header"></div>
<div class="mdui-m-b-2" id="doc">
    <div class="mdui-text-center mdui-color-theme-a200 mdui-text-color-white mdui-m-b-2" style="padding-top:80px;padding-bottom:80px;">
        <div class="mdui-typo-display-1">{{ info.name }}</div>
        <div class="mdui-typo-subtitle">{{ info.desc }}</div>
    </div>
    <div class="mdui-col-md-9 mdui-col-offset-md-2 mdui-typo" style="">
        <div class="mdui-typo-headline mdui-text-color-theme-a400 mdui-m-y-2" id="api_explanation">接口说明</div>
        <div class="mdui-chip" id="request_explanation">
          <span class="mdui-chip-icon mdui-color-theme-accent">
            <i class="mdui-icon material-icons">short_text</i>
          </span>
            <span class="mdui-chip-title">请求说明</span>
        </div>
        <br>
        <div class="mdui-row">
            <div class="mdui-col-sm-9">
                <div class="mdui-m-t-2">
                    <p>
                        <b>请求地址：</b>
                        <a :data-clipboard-text="shouurl" mdui-tooltip="{content: 'copy'}" onclick="return false"  >{{ shouurl }}</a>
                        <button class="mdui-btn mdui-btn-icon mdui-ripple url" :data-clipboard-text="weburl" mdui-tooltip="{content: 'copy'}">
                            <i class="mdui-icon material-icons">content_copy</i>
                        </button>
                        <br>
                        <b>返回格式：</b>
                        <kbd>{{ info.format }}
                            <br></kbd>
                        <b>请求方式：</b>
                        <kbd>{{ info.method }}
                            <br></kbd>
                        <b>请求示例：</b>
                        <a :data-clipboard-text="weburl+info.exampleurl.substring(1)"  mdui-tooltip="{content: 'copy'}" onclick="return false"  >{{ weburl }}{{ info.exampleurl.substring(1) }}</a>
                        <button class="mdui-btn mdui-btn-icon mdui-ripple url" :data-clipboard-text="weburl+info.exampleurl.substring(1)" mdui-tooltip="{content: 'copy'}">
                            <i class="mdui-icon material-icons">content_copy</i>
                        </button>
                        <br>
                    </p>
                </div>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-sm-9">
                <div class="mdui-chip mdui-m-t-2" id="request_param">
              <span class="mdui-chip-icon mdui-color-theme-accent">
                <i class="mdui-icon material-icons">short_text</i>
              </span>
                    <span class="mdui-chip-title">请求参数</span>
                </div>
                <div class="mdui-table-fluid mdui-m-t-2 mdui-typo">
                    <table class="mdui-table mdui-table-hoverable">
                        <thead>
                        <tr>
                            <th>参数名称</th>
                            <th>参数类型</th>
                            <th>是否必填</th>
                            <th>备注内容</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="requestparameter in info.requestparameter">
                            <td>
                                <code>{{ requestparameter.name }}</code>
                            </td>
                            <td>
                                <code>{{ requestparameter.type }}</code>
                            </td>
                            <td>
                                <code>{{ requestparameter.required }}</code>
                            </td>
                            <td>{{ requestparameter.info }}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="mdui-row">
            <div class="mdui-col-sm-9" v-if="info.PHPexample">
                <div class="mdui-typo-headline mdui-text-color-theme-a400 mdui-m-y-2" id="example_code">PHP代码示例</div>
                <highlightjs class="mdui-shadow-1" language="php" :code="info.PHPexample" />
            </div>
            <div class="mdui-col-sm-9">
                <div class="mdui-chip mdui-m-t-2" id="return_example">
              <span class="mdui-chip-icon mdui-color-theme-accent">
                <i class="mdui-icon material-icons">short_text</i>
              </span>
                    <span class="mdui-chip-title">返回示例</span>
                </div>
                <div class="mdui-m-t-2" v-if="info.retur">
                    <highlightjs class="mdui-shadow-1" :code="info.retur" />
                </div>
            </div>
        </div>
    </div>
</div>

<div th:include="common/footer::footer"></div>

<script src="/js/jquery.min.js"></script>
<script src="/js/mdui.min.js"></script>
<script src="/js/index.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/clipboard.min.js"></script>
<script src="/js/smooth-scroll.polyfills.min.js"></script>
<script th:inline="javascript">
    /* 注册一个highlightjs插件 */
    Vue.use(hljs.vuePlugin);

    let doc = new Vue({
        el: '#doc',
        data: {
            info: [],
            weburl: [[${url}]]+"/send?apiname="+[[${type}]],
            shouurl:"",//请求地址

        },
        created (){
            var id = window.location.pathname.split('/');


            fetch('/api/getoneapi?doc='+id[2])
                .then(response => response.json())
                .then(json => {
                    this.info = json.data;
                    /* 请求参数 */
                    var requestparameter = json.data.requestparameter;
                    this.info.requestparameter = JSON.parse(requestparameter).data;
                }
                );
            if ([[${example}]]===""){//判断是否需要传参
                this.shouurl=[[${url}]]+"/send?apiname="+[[${type}]];
                return this.weburl=[[${url}]]+"/send?apiname="+[[${type}]];
            }else {
                this.shouurl=[[${url}]]+"/send?apiname="+[[${type}]];
                return this.weburl=[[${url}]]+"/send?apiname="+[[${type}]]+"&&";
            }

        }
    });

    var clipboard = new ClipboardJS('.url');
    clipboard.on('success', function(e) {
        mdui.snackbar("复制成功！");
        e.clearSelection();
    });
    clipboard.on('error', function(e) {
        mdui.snackbar("复制失败！");
    });
</script>
</body>
</html>